<template>
  <el-card
    class="dept-contract-list work-bench-department__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <div class="dept-contract-list__header work-bench-department__card__header">
      <span class="work-bench-department__card__title dept-contract-list__title">合同提醒</span>
      <span class="dept-contract-list__more" @click="$router.push({ name: 'MaintainContract_ContractList' })"
        >更多 >></span
      >
    </div>
    <div class="work-bench-department__card__body dept-contract-list__body dept-contract-table">
      <div class="dept-contract-table__header">
        <div style="width: 40%" class="dept-contract-table__header-item">合同名称</div>
        <div style="width: 20%" class="dept-contract-table__header-item">类型</div>
        <div style="width: 20%" class="dept-contract-table__header-item">到期时间</div>
        <div style="width: 20%" class="dept-contract-table__header-item">剩余天数</div>
      </div>
      <ul class="dept-contract-table__body infinite-list" v-infinite-scroll="load">
        <li v-for="item in list" :key="item.id" class="dept-contract-table__item infinite-list-item">
          <div style="width: 40%">{{ item.projectName }}</div>
          <div style="width: 20%">{{ item.projectTypeName }}</div>
          <div style="width: 20%">
            {{ item.contractEndTime ? dayjs(item.contractEndTime).format('YYYY-MM-DD') : '-' }}
          </div>
          <div
            style="width: 20%"
            :style="
              timeDiff(item.contractEndTime).name === 'timeout' ||
              (timeDiff(item.contractEndTime).name === 'diff' && timeDiff(item.contractEndTime).label < 10)
                ? 'color: #FF6A55'
                : ''
            "
          >
            {{ timeDiff(item.contractEndTime).label }}
          </div>
        </li>
        <li
          v-if="!list || !list.length"
          class="dept-contract-table__item dept-contract-table__no-data infinite-list-item"
        >
          暂无数据！
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import dayjs from 'dayjs'
import dashboardDeptApi from '@admin/views/Workbench/WorkbenchDepartment/api'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DeptContractList',

  props: {
    /**
     * 部门ID
     */
    organId: { type: String, default: '' },
  },

  data() {
    return {
      dayjs,
      /**
       * 当前页
       */
      activePage: 1,
      /**
       * 加载状态
       */
      loading: false,
      /**
       * 加载完成状态
       */
      finished: false,
      /**
       * 列表
       */
      list: [],
    }
  },

  methods: {
    timeDiff(time) {
      if (!time) return { name: '', label: '-' }

      if (dayjs().isAfter(dayjs(time), 'day')) return { name: 'timeout', label: '已到期' }

      return {
        name: 'diff',
        label: dayjs(time).diff(dayjs(), 'day'),
      }
    },

    load() {
      if (this.loading || this.finished) return

      dashboardDeptApi.queryDeptContractList({
        type: 3,
        pageSize: 10,
        tenantNo: 1,
        page: this.activePage,
        organId: this.organId,
      }).then((res) => {
        this.loading = false
        if (this.activePage * 10 >= (res.comQuery.totalCount || 1)) this.finished = true
        if (!res.projectDto || !res.projectDto.length) return

        res.projectDto.forEach((item) => {
          this.list.push(item)
        })

        this.activePage = res.comQuery.page + 1
      }).catch(() => {
        this.loading = false
      })
    },
  },

  watch: {
    organId() {
      this.list = []
      this.loading = false
      this.finished = false
      this.activePage = 1
      this.load()
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
